
<template>
  <div class="coupon-container">
    <div class="coupon-icon">
      <img :src="coponImg" alt="Coupon Ico">
    </div>
    <div class="coupon-details">
      <h3 class="coupon-title">{{ couponTitle }}</h3>
      <p class="coupon-description">{{ couponDescription }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CouponContainer',
  props: {
    couponTitle: {
      type: String,
      default: '雪碧无糖0.3元购'
    },
    couponDescription: {
      type: String,
      default: '可口可乐欢乐汇'
    },
    coponImg:{
      type:String,
      default: require('../../assets/images/menu1.png')
    }
  }
}
</script>

<style scoped>
         .coupon-container {
             display: flex;
             align-items: center;
             padding: 10px;
             border: 1px solid #ccc;
             border-radius: 5px;
             /* max-width: 95%; */
             margin: 0 auto;
             width: 90%;
         }

         .coupon-icon {
             width: 50px;
             height: 50px;
             border-radius: 50%;
             background: #f2f2f2;
             margin-right: 10px;
             margin-left: px;
         }

         .coupon-icon img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             border-radius: 50%;
         }

         .coupon-details {
            /* flex: 1; */
            text-align:left;
         }

         .coupon-title {
             font-weight: bold;
             font-size: 1.2em;
             margin: 0 0 5px 0;
             margin-top: 15px;

         }

         .coupon-description {
             color: #555;
             margin-top: 1px;
         }
</style>
